<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 软件包管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="margin-top20">
			<el-table :data="tableData" border class="table" ref="multipleTable"
				header-cell-class-versionName="table-header-style">
				<el-table-column prop="versionCode" label="版本号"></el-table-column>
				<el-table-column prop="updateLog" label="描述"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="'编辑'" :visible.sync="editVisible" width="30%">
			<el-form label-width="100px">
				<el-form-item label="版本号">
					<el-input placeholder="请输入版本号" v-model="form.versionCode" clearable style="width:300px;"></el-input>
				</el-form-item>
				<el-form-item label="版本名">
					<el-input placeholder="请输入版本名" v-model="form.versionName" clearable style="width:300px;"></el-input>
				</el-form-item>
				<el-form-item label="是否强制更新">
					<el-switch v-model="form.isForceUpdate" active-text="是" active-value="1" inactive-text="否" inactive-value="0"
						active-color="#13ce66" inactive-color="#ff4949">
					</el-switch>
				</el-form-item>
				<el-form-item label="更新日志">
					<el-input type="textarea" placeholder="请输入安装包描述" v-model="form.updateLog" clearable
						style="width:300px;"></el-input>
				</el-form-item>
				<el-form-item label="文件上传">
					<singleUploadOss v-model="form.downurl" @input="getFile" :fileList="fileList">
					</singleUploadOss>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getToken,
	} from '@/utils/auth'
	import singleUploadOss from "@/components/Upload/SingleUploadOss"
	export default {
		name: 'setting',
		components: {
			singleUploadOss
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				headers: {
					Authorization: getToken(),
					'Content-Type': 'multipart/form-data'
				},
				uploadUrl: this.$host + '/file/upload',
				tableData: [],
				fileList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
			};
		},
		created() {
			this.getData();
		},
		methods: {
			//获取文件
			getFile(data) {
				this.form.downurl = data
			},
			async getData() {
				const res = await this.$get('/admin/apk/getList', this.query)
				if (res.code == 1000) {
					this.tableData = [res.data]
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			// 编辑操作
			handleEdit(index, row) {
				this.fileList = [];
				this.fileList.push({
					url: row.downurl,
					name: row.versionCode + "版本安装包"
				});
				this.form = JSON.parse(JSON.stringify(row));
				this.editVisible = true;
			},
			// 保存编辑
			async saveEdit() {
				const res = await this.$post('/admin/apk/add', JSON.stringify(this.form))
				if (res.code == 1000) {
					this.$message.success('提交成功');
					this.editVisible = false;
				}
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style scoped>
</style>